import React, { FC, useState } from "react";
import cn from "classnames";
import { Icon } from "@/ui/Icons/Icon";
import cls from "./Slider.module.scss";

type Props = {
  items: React.ReactNode[];
};

export const Slider: FC<Props> = ({ items }) => {
  const [activeSlide, setActiveSlide] = useState<number>(0);
  const maxLength = items.length - 1;
  const next = () => {
    if (activeSlide === maxLength) {
      setActiveSlide(0);
    } else {
      setActiveSlide((p) => p + 1);
    }
  };

  const prev = () => {
    if (activeSlide === maxLength) {
      setActiveSlide(0);
    } else {
      setActiveSlide((p) => p + 1);
    }
  };

  return (
    <div className={cls.root}>
      <button type="button" className={cls.prev} onClick={prev}>
        <Icon name="arrow" rotate={90} />
      </button>
      {items.map((item, index) => {
        return (
          <div
            className={cn(cls.slide, {
              [cls.inactive]: activeSlide !== index,
              [cls.is_active]: activeSlide === index,
            })}
            key={index}
          >
            {item}
          </div>
        );
      })}
      <button type="button" className={cls.next} onClick={next}>
        <Icon name="arrow" rotate={-90} />
      </button>
    </div>
  );
};
